<!doctype html>
<html lang="en" class="orange-theme">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="Maxartkiller">

    <title>书库·辰星中文网</title>

    <!-- iconfont CSS -->
    <link rel="stylesheet" href="/static/mobile/vendor/iconfont/iconfont.css">

    <!-- Roboto fonts CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">

    <!-- Bootstrap core CSS -->
    <link href="/static/mobile/vendor/bootstrap-4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/mobile/css/style.css" rel="stylesheet">

    <link href="/static/mobile/vendor/dropload/dropload.css" rel="stylesheet">
</head>

<body>
<div class="row no-gutters vh-100 loader-screen">
    <div class="col align-self-center text-white text-center">
        <div class="laoderhorizontal">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<div class="wrapper">

    <div class="header">
        <div class="row no-gutters">
            <div class="col-auto">
                <a href="/mobile/index/index" class="btn btn-link text-dark"><i class="iconfont icon-back"></i></a>
            </div>
            <div class="col text-left header-title">书库</div>
            <div class="col text-right">
                <a href="/mobile/search/index" class="btn btn-link text-dark">
                    <i class="iconfont icon-search"></i>
                </a>
                {if empty($member_id)}
                <a href="/mobile/login/login" class="btn btn-link text-dark">
                    <!-- 未登陆 -->
                    <!--                    <i class="iconfont icon-denglu"></i>-->
                    <i>登录</i>
                    <!--                    <span>立即登陆</span>-->
                </a>
                &nbsp;&nbsp;
                {else/}
                <a href="" class="btn btn-link text-dark">
                    <!-- 已登陆 -->
                    <i class="iconfont icon-zhanghao"></i>
                </a>
                {/if}
                <a href="" class="btn btn-link text-dark" id="btnRight">
                    <i class="iconfont icon-shaixuan"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="wrap">
        <div class="layer-right">
            <h5 class="text-center">筛选</h5>
            <form class="catelog">
                <h6>频道</h6>
                <div class="d-flex pl-2 flex-wrap">
                    {volist name="first_data" id="vo"}
                    <div class="radio-label">
                        <input type="radio" id="channel-{$key}" name="channel" value="{$vo.id}">
                        <label for="channel-{$key}" onclick="channel('{$vo.id}')">{$vo.name}</label>
                    </div>
                    {/volist}
                </div>
                <h6>分类</h6>
                <div class="d-flex pl-2 flex-wrap" id="two_list">
                    {volist name="two_data" id="vo"}
                    <div class="radio-label">
                        <input type="radio" id="cate-{$key}" name="cate" value="{$vo.id}">
                        <label for="cate-{$key}">{$vo.name}</label>
                    </div>
                    {/volist}
                    <!--<div class="radio-label">
                        <input type="radio" id="cate-2" name="cate" value="6">
                        <label for="cate-2">现代都市</label>
                    </div>-->

                </div>
                <h6>状态</h6>
                <div class="d-flex pl-2 flex-wrap">
                    <div class="radio-label">
                        <input type="radio" id="status-1" name="complete" value="0">
                        <label for="status-1">连载</label>
                    </div>
                   <div class="radio-label">
                        <input type="radio" id="status-2" name="complete" value="1">
                        <label for="status-2">完结</label>
                    </div>
                </div>
                <h6>属性</h6>
                <div class="d-flex pl-2 flex-wrap">
                    <div class="radio-label">
                        <input type="radio" id="attr-1" name="is_free" value="0">
                        <label for="attr-1">免费</label>
                    </div>
                    <div class="radio-label">
                        <input type="radio" id="attr-2" name="is_free" value="1">
                        <label for="attr-2">VIP</label>
                    </div>
                </div>
                <div class="fixed-bottom text-center">
                    <div class="d-flex flex-fill">
                        <buttom id="reset" class="btn btn-light btn-sm w-50">重置</buttom>
                        <buttom id="sure" class="btn btn-orange btn-sm w-50">完成</buttom>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="container">
        <div class="list-content">
            <h6 class="subtitle">男频 | 东方玄幻 | 连载</h6>
            <div class="d-flex justify-content-between flex-wrap pb-2 lists">
                <!-- <a href="detail.html">
                    <div class="media mt-3">
                        <img src="img/list1.jpg" class="align-self-center mr-3 w-25" alt="...">
                        <div class="media-body">
                            <h6 class="mt-0"><b>空间锦鲤之农门药香</b></h6>
                            <p class="text-secondary small text-overflow-elli">空间锦鲤之农门药香空间锦鲤之农门药香空间锦鲤之农门药香空间锦鲤之农门药香空间锦鲤之农门药香</p>
                            <p class="mb-0 d-flex justify-content-between"><small>忘雨 著</small><small class="text-secondary">言情小说</small></p>
                        </div>
                    </div>
                </a> -->
            </div>
        </div>
    </div>
</div>


<!-- jquery, popper and bootstrap js -->
<script src="/static/mobile/js/jquery-3.3.1.min.js"></script>
<script src="/static/mobile/vendor/bootstrap-4.3.1/js/bootstrap.min.js"></script>

<!-- template custom js -->
<script src="/static/mobile/js/main.js"></script>
<script src="/static/mobile/js/mSlider.js"></script>
<script src="/static/mobile/vendor/dropload/dropload.min.js"></script>
<!-- page level script -->
<script>
    // $(window).on('load', function() {
    //     //移动端使用touchend
    //     var event = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) ? 'touchend' : 'click';
    //     console.log(event)
    //     // 选择器
    //     var Q = function(id) {
    //         return document.getElementById(id)
    //     };
    //
    //     //方向控制
    //     //右
    //     var _right = new mSlider({
    //         dom: ".layer-right",
    //         direction: "right",
    //         distance: "70%",
    //     });
    //
    //     Q("btnRight").addEventListener(event, function(e) {
    //
    //         _right.open();
    //     })
    //     Q("reset").addEventListener(event, function(e) {
    //         $("input[name='channel']").prop('checked', false)
    //         $("input[name='channel']").eq(0).prop('checked', true)
    //         // [0].attr("checked",true)
    //         $("input[name='cate']").prop('checked', false)
    //         $("input[name='status']").prop('checked', false)
    //         $("input[name='attr']").prop('checked', false)
    //
    //         // _right.close();
    //     });
    //     Q("sure").addEventListener(event, function(e) {
    //         var channelId = []
    //         channelId.push($("input[name='channel']:checked").val())
    //         var cateId = []
    //         cateId.push($("input[name='cate']:checked").val())
    //         console.log(channelId,cateId)
    //         //在此处调用ajax请求
    //         _right.close();
    //     });
    //
    // });

    $(function() {
        var total_page;
        var current_page = 1;
        var data = {
            page: current_page,
            /*channelId: [],
            cateId: []*/
        }
        var isbool = false;
        var dropload = $('.list-content').dropload({
            scrollArea : window,
            loadDownFn : function(me){
                //->AJAX
                $.ajax({
                    type: 'post',
                    url: `/mobile/book/bookStore`,
                    dataType: 'json',
                    data: data,
                    success: function(res){
                        total_page = res.last_page
                        current_page ++
                        data.page ++

                        var result = '';
                        $.each(res.data, function(k,item) {
                            result += `<a href="/mobile/book/bookInfo/id/${item.id}">
													<div class="media mt-3">
														<img src="${item.cover}" class="align-self-center mr-3 w-25" alt="...">
														<div class="media-body">
															<h6 class="mt-0"><b>${item.name}</b></h6>
															<p class="text-secondary small text-overflow-elli">${item.descr}</p>
															<p class="mb-0 d-flex justify-content-between"><small>${item.author} 著</small><small class="text-secondary">${item.cate_name}</small></p>
														</div>
													</div>
												</a>`

                        });
                        if(current_page > total_page) {
                            me.lock()
                            me.noData(true)
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.loader-screen').fadeOut('slow');
                            $('.lists').append(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },1000);
                        // 数据加载完
                        isbool = false
                    },
                    error: function(xhr, type){
                        $('.loader-screen').fadeOut('slow');
                        alert('Ajax error!');
                        isbool = false
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });

            }
        });



        //移动端使用touchend
        var event = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) ? 'touchend' : 'click';
        console.log(event)
        // 选择器
        var Q = function(id) {
            return document.getElementById(id)
        };

        //方向控制
        //右
        var _right = new mSlider({
            dom: ".layer-right",
            direction: "right",
            distance: "70%",
        });

        Q("btnRight").addEventListener(event, function(e) {

            _right.open();
        })
        Q("reset").addEventListener(event, function(e) {
            $("input[name='channel']").prop('checked', false)
            $("input[name='channel']").eq(0).prop('checked', true)
            // [0].attr("checked",true)
            $("input[name='cate']").prop('checked', false)
            $("input[name='status']").prop('checked', false)
            $("input[name='attr']").prop('checked', false)

            // _right.close();
        });
        Q("sure").addEventListener(event, function(e) {
           /* data.channelId = []
            data.cateId = []
            data.page -=1;
            // var channelId = []
            data.channelId.push($("input[name='channel']:checked").val())
            // var cateId = []
            data.cateId.push($("input[name='cate']:checked").val())
            console.log(data)*/
            let channel = $("input[name='channel']:checked").val();
            let cate = $("input[name='cate']:checked").val();
            let complete = $("input[name='complete']:checked").val();
            let is_free = $("input[name='is_free']:checked").val();
            if (typeof(cate) == "undefined"){
                cate = 0;
            }
            if (typeof(complete) == "undefined"){
                complete = -1;
            }
            if (typeof(is_free) == "undefined"){
                is_free = -1;
            }
            data.page -=1;
            data.channel = channel;
            data.cate = cate;
            data.complete = complete;
            data.is_free = is_free;
            // console.log(data);
            // console.log(data);

            $.post('/mobile/book/postBookStore', {
                channel: channel,
                cate: cate,
                complete: complete,
                is_free: is_free
            }, function (data) {
                console.log(data);
                var result = '';
                $.each(data.data, function (k, item) {
                    result += `<a href="/mobile/book/bookInfo/id/${item.id}">
                                            <div class="media mt-3">
                                                <img src="${item.cover}" class="align-self-center mr-3 w-25" alt="...">
                                                <div class="media-body">
                                                    <h6 class="mt-0"><b>${item.name}</b></h6>
                                                    <p class="text-secondary small text-overflow-elli">${item.descr}</p>
                                                    <p class="mb-0 d-flex justify-content-between"><small>${item.author} 著</small><small class="text-secondary">${item.cate_name}</small></p>
                                                </div>
                                            </div>
                                        </a>`;

                });
                $('.lists').html(result);
            });
            //在此处调用ajax请求
            _right.close();
        });
    });

</script>
<script>
    function channel(id){
        console.log(id);
        $.post('/mobile/book/cate',{id:id},function(data){
            var html_data = '';
            $.each(data.data, function(key,item) {
                html_data += `<div class="radio-label">
                        <input type="radio" id="cate-${key}" name="cate" value="${item.id}">
                        <label for="cate-${key}">${item.name}</label>
                    </div>`;
            });
            $('#two_list').html(html_data);
        })
    }
</script>
</body>

</html>
